<template>
	<div class="table" id="tableHover">
		<el-table :data="showData" border style="width: 100%;overflow:auto" :header-cell-style="theader"
			:cell-class-name="tableCellStyle" :row-style="tableRowStyle" :header-cell-class-name="cellClass"
			row-key="ids" @selection-change="handleSelectionChange" @select="handleselect"
			@select-all="handallselct" ref="select">
			<el-table-column label="请选择" width="55" type="selection" :reserve-selection="true">
			</el-table-column>
			<el-table-column type="index" label="序号" width="65" class="display" class-name="allow">
			</el-table-column>
			<el-table-column label="志愿性质" min-width="85" class-name="allow">
				<template slot-scope="scope">
					<div>{{scope.row.voluntaryNature}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="collegeCode" label="院校代码" min-width="85" class-name="allow">
			</el-table-column>
			<el-table-column prop="collegeName" label="院校名称" min-width="115" class-name="allow">
			</el-table-column>
			<el-table-column prop="professionalGroupCode" label="专业代码" min-width="85" class-name="allow" >
			</el-table-column>
			<el-table-column prop="professionalGroup" label="专业名称" min-width="100" class-name="allow">
			</el-table-column>
			<el-table-column prop="controlLine" label="控制线" min-width="72" class-name="allow">
			</el-table-column>
<!-- 			<el-table-column prop="planEnrollment" label="计划数" min-width="72" class-name="allow">
			</el-table-column>
			<el-table-column prop="actualEnrollment" label="实录" min-width="65" class-name="allow"> -->
			</el-table-column>
			<el-table-column prop="minCastScore" label="最低投档分数" min-width="115" class-name="allow">
			</el-table-column>
			<el-table-column prop="minScoreDifference" label="最低投档分差" min-width="115" class-name="allow">
			</el-table-column>
			<el-table-column prop="ranking" label="排名" min-width="65" class-name="allow">
			</el-table-column>
			<el-table-column prop="introduction" label="链接" min-width="87" class-name="allow">
				<template slot-scope="scope">
					<a :href="scope.row.introduction" target="_blank"
						style="text-decoration:none;color:rgba(51, 170, 255, 1)">链接</a>
				</template>
			</el-table-column>
			<el-table-column type="expand" label="专业分类" width="90">
				<template slot-scope="slot">
					<div class="expand" width="105">
						<div class="subject" v-for="(item,index) in slot.row.professional" :key="index">
							<div class="input" id="select">
								<div class="label">专业&nbsp;{{item.professionalNumber}}</div>
								<div class="left">
									<el-input v-model="item.professionalCode" placeholder="专业代码"></el-input>
								</div>
								<div class="right">
									<el-input v-model="item.professionalName" placeholder="专业名称"></el-input>
								</div>
								<!-- 级联选择器  -->
								<div class="block">
									<el-cascader v-model="selectdata1" placeholder="专业分类(仅供参考)" :props="prop"
										:show-all-levels="false" @change="cilckchange"></el-cascader>
								</div>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 具体专业介绍的模态框 -->
		<el-dialog  :visible.sync="jobdialogVisible" @close="jobclose" width="50%" append-to-body>

			<template slot="title">
				<div style="font-size: 35px;
			font-family: Noto Sans SC;color:#38b48b;font-weight: bold;">{{title}}</div>
			</template>
			<p>{{Maindisciplines[0]}}</p>
			<span>{{Maindisciplines[1]}}</span>
			<p>{{Maincourses[0]}}</p>
			<span>{{Maincourses[1]}}</span>
			<p>{{lengthofschooling[0]}}</p>
			<span>{{lengthofschooling[1]}}</span>
			<p>{{Trainingobjectives[0]}}</p>
			<span>{{Trainingobjectives[1]}}</span>
			<p>{{requirements[0]}}</p>
			<span>{{requirements[1]}}</span>
			<p>{{Practicalteaching[0]}}</p>
			<span>{{Practicalteaching[1]}}</span>
			<p>{{degree[0]}}</p>
			<span>{{degree[1]}}</span>
			<p>{{abilities[0]}}</p>
			<span>{{abilities[1]}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="jobdialogVisible = false">返回</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import Sortable from 'sortablejs'
	export default {
		props: {
			// majorData:Array,
			color: String,
			tableData: Array,
			status: Number,
			serverselect: Array,
			tableIndex: Number,
		},
		data() {
			return {
				title: "",
				rowKey:"",
				jobdialogVisible: false,
				selectkey: [],
				showFlag: false,
				showData: [],
				// majordata:[],
				// color: [
				// 	"rgba(243, 145, 7, 0.25)",
				// 	"rgba(137, 77, 255, 0.25)",
				// 	"rgba(0, 178, 60, 0.25)",
				// 	"rgba(255, 84, 51, 0.25)",
				// 	"rgba(252, 37, 216, 0.25)",
				// 	"rgba(191, 219, 255, 1)",
				// ],
				number: 0,
				newExam: false,
				selection: [],
				selectdata1: [],
				temselection: [],
				finalChosenData: [],
				isexpand: false,
				selectdata: [],
				beforedata: [],
				prop: {
					// expandTrigger: 'hover',
					lazy: true,
					lazyLoad: this.lazyLoad
				},
				// 主要学科
				Maindisciplines: "",
				// 主要课程
				Maincourses: "",
				// 修业年限
				lengthofschooling: "",
				// 培养目标
				Trainingobjectives: "",
				// 培养要求
				requirements: "",
				// 实践教学
				Practicalteaching: "",
				// 授予学位
				degree: "",
				// 毕业生应获得以下几方面的知识和能力
				abilities: ""
			}
		},
		methods: {
			//表头样式
			theader({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return `font-size:0.09rem;color: #FFFFFF;font-family:Microsoft YaHei;font-weight: 100;line-height: 23px;height:0.3rem;padding-left:10px;text-align:center;border-left:none;border-right:none;background-color:${this.color};`
			},
			//元素样式
			tableCellStyle({
				row,
				rowIndex
			}) {
				return 'rowstyle'
			},
			//行样式 设置背景色
			tableRowStyle({
				row,
				rowIndex
			}) {
				return {
					// 'background-color': this.color[rowIndex],
					'color': 'black'
				}
			},
			//行拖拽
			rowDrop() {
				const tbody = document.querySelector('.el-table__body-wrapper tbody')
				Sortable.create(tbody, {
					dragClass: "dragClass", //设置拖拽样式类名
					ghostClass: "ghostClass", //设置拖拽停靠样式类名
					chosenClass: "chosenClass", //设置选中样式类名
					forceFallback: true,
					fallbackClass: "dragged-item",
					//expand类禁止拖动
					// filter:".expand",
					//允许拖动的类 防止expand扩展出的专业选择框被拖动
					handle: ".allow",
					delay: 100,
					animation: 700,
					onEnd: ({
						newIndex,
						oldIndex
					}) => {
						let arr = this.showData
						arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0])
						this.$nextTick(() => {
							this.showData = arr
							// console.log(this.showData);
						})
					}
				})
			},
			// 获取每一条数据的唯一标识
			getrowkeys(row){
				this.rowkey = row.professionalGroupCode+row.collegeCode
				console.log(this.rowkey)
				return this.rowkey
			},
			//隐藏表头全选复选框
			cellClass(row) {
				if (row.columnIndex === 0) {
					return 'disabledCheck'
				}
			},
			//复选框选中操作selectdata数组
			handleselect(selection, row) {
				// 判断selectdata是否已经存在当前项

				let existence = false
				this.selectdata.forEach(item => {
					if (item.collegeName + item.ids === row.collegeName + row.ids) {
						existence = true
					}
				})
				if (existence) {
					// 若存在，代表操作是 取消选中
					this.handleDelItem(row)
				} else {
					// 反之，选中某项
					this.selectdata.push(row)
				}

			},
			// 点击三级分类进行查看专业具体介绍
			async cilckchange() {
				this.jobdialogVisible = true
				this.title = this.selectdata1[2] + "专业的具体介绍";
				const {
					data: res
				} = await this.$axios.post(
					`${this.baseURL}/SubjectProfessionalClassification/showSpecialtyInstructionByMajorName?majorName=${this.selectdata1[2]}`
				)
				if (res.status !== 200) {
					this.$message.error('获取失败')
				}
				this.Maindisciplines = res.data[0].split(":")
				this.Maincourses = res.data[1].split(":")
				this.lengthofschooling = res.data[2].split(":")
				this.Trainingobjectives = res.data[3].split(":")
				this.requirements = res.data[4].split(":")
				this.Practicalteaching = res.data[5].split(":")
				this.degree = res.data[6].split(":")
				this.abilities = res.data[7].split(":")
				// console.log(res.data)
				this.selectdata1 = ""
			},
			async lazyLoad(node, resolve) {
				const {
					level
				} = node;

				if (level === 0) { //一级选择器的生成
					const {
						data: res
					} = await this.$axios.get(
						`${this.baseURL}/SubjectProfessionalClassification/showAllSubjects`
					)

					let nodes = Array.from(res.data).map(item => ({
						value: item,
						label: item // 生成列表 array.from可以研究研究 真的是好用
					}))
					resolve(nodes)
				} else if (level === 1) { // 二级选择器的生成
					const {
						data: res
					} = await this.$axios.post(
						`${this.baseURL}/SubjectProfessionalClassification/showMajorCategoriesBySubject?subject=${node.value}`
					)
					let nodes = Array.from(res.data).map(item => ({
						value: item,
						label: item,
					}))
					resolve(nodes)
				} else if (level === 2) { // 三级选择器的生成
					const {
						data: res
					} = await this.$axios.post(
						`${this.baseURL}//SubjectProfessionalClassification/showMajorNameByMajorCategories?majorCategories=${node.value}`
					)
					let nodes = Array.from(res.data).map(item => ({
						value: item,
						label: item,
						leaf: level >= 2 // 设置为只有三 级选择
					}))
					resolve(nodes)
				}
			},
			// 专业具体介绍模态框关闭清空数据，避免不同行的数据冲突
			jobclose() {
				this.title = ""
				this.detailjob = ""
				this.jobdialogVisible = false
			},
			handallselct(row) {
				if (row.length) {

					console.log("全部选择")
					console.log(this.selectdata)
					row.forEach(item => {
						let STAUS = false
						this.selectdata.forEach(item2 => {
							if (item.collegeName + item.ids === item2.collegeName + item2
								.ids) {
								STAUS = true
							}
						})
						if (!STAUS) {
							this.selectdata.push(item)
						}
					})

				} else {
					console.log(this.showData)
					this.showData.forEach(item => {
						let Status = false
						this.selectdata.forEach(item2 => {
							if (item.collegeName + item.ids === item2.collegeName + item2
								.ids) {
								Status = true
							}
						})
						if (Status) {
							this.handleDelItem(item)
						}
					})
				}
			},
			//对selectdata取消选中操作
			handleDelItem(row) {
				let index = -1
				this.selectdata.forEach((item, idx) => {
					if (item.collegeName + item.ids === row.collegeName + row.ids) {
						index = idx
						this.getcancel(item)
					}
				})
				if (index >= 0) {
					this.selectdata.splice(index, 1)

				}
			},
			//对table中showdata对比操作获取具体选中的复选框
			comparision(row) {
				// console.log(this.selectdata)
				let newrows = []
				this.$nextTick(() => {
					this.showData.forEach(row => {
						this.selectdata.forEach(item => {
							if (row.collegeName + row.professionalGroupCode === item.collegeName +
								item.professionalGroupCode) {
								this.$refs.select.toggleRowExpansion(row, true);
							}
						})
					})
				})
				// console.log(row)
				// this.$nextTick(()=>{
				//   row.forEach(el=>{
				//       this.selectdata.forEach(item=>{
				//         if(item.collegeName+item.collegecode!=el.collegeName+el.collegecode){
				//           this.$refs.select.toggleRowExpansion(item,false);
				//         }
				//       })
				//   })
				// })

			},
			//对已展开的树形表格操作，取消展开
			getcancel(item) {
				this.$nextTick(() => {
					this.showData.forEach(row => {
						if (item.collegeName + item.professionalGroupCode === row.collegeName + row
							.professionalGroupCode) {
							this.$refs.select.toggleRowExpansion(row, false);
						}
					})

				})


			},

			//多选框
			handleSelectionChange(row) {
				// alert(1)
				//  this.$refs.select.toggleRowExpansion(row,true)
				this.comparision(row)
				this.selection = []
				this.selection = row
				// if(this.selection.length>9&&this.status==2){
				//   // alert('您选择的志愿数量已达上限！')
				//   this.$emit('showalert')
				// console.log(row)
				//   let thelastone = this.selectdata.length-1
				//    this.$refs.select.toggleRowSelection(this.selectdata[thelastone],false);
				//    this.$refs.select.toggleRowExpansion(this.selectdata[thelastone],false);
				//   // return;
				// }
				// console.log(this.selection)
				this.selection.push(this.tableIndex)
				// alert(this.tableIndex)
				// console.log(this.selection)
				let a = 0
				for (var i = 0; i < this.selection.length; i++) {
					for (var j = i + 1; j < this.selection.length; j++) {
						if (this.selection[i]['id'] > this.selection[j]['id']) {
							a = this.selection[i]
							this.selection[i] = this.selection[j]
							this.selection[j] = a
						}
					}
				}
				this.$emit('selection', this.selection)
			},
			//返回该页面还原该页面原先勾选状态
			choosen() {
				// console.log(this.status)
				if (this.status == 1) {
					this.beforedata = JSON.parse(sessionStorage.limittable)
					this.selectdata = this.beforedata
					//  console.log(this.showData)
					// console.log(this.beforedata)
					//  alert(1)
					this.beforedata.forEach(el => {
						//从session保存的选中数据中分离出属于当前表格的数据
						if (el.volunteerGroup == this.tableIndex + 1) {
							this.finalChosenData.push(el)
						}
					})
					this.$nextTick(() => {
						this.finalChosenData.forEach(item => {
							this.showData.forEach(row => {
								if (item.collegeName + item.professionalGroupCode === row
									.collegeName + row.professionalGroupCode) {
									this.$refs.select.toggleRowSelection(row, true);
								}
							})
						})
					})
				} else {
					// alert(2)
					this.beforedata = JSON.parse(sessionStorage.preferredtable)
					this.selectdata = this.beforedata
					//  console.log(this.showData)
					//  console.log(this.beforedata)
					//  alert(1)
					this.beforedata.forEach(el => {
						//从session保存的选中数据中分离出属于当前表格的数据
						if (el.volunteerGroup == this.tableIndex + 1) {
							this.finalChosenData.push(el)
						}
					})
					this.$nextTick(() => {
						this.finalChosenData.forEach(item => {
							this.showData.forEach(row => {
								if (item.collegeName + item.professionalGroupCode === row
									.collegeName + row.professionalGroupCode) {
									this.$refs.select.toggleRowSelection(row, true);
								}
							})
						})
					})
				}



			},
			//用服务器数据
			getchose() {
				if (this.status == 1) {
					this.beforedata = this.serverselect
					this.selectdata = this.beforedata
					//  console.log(this.showData)
					// console.log(this.beforedata)
					//  alert(1)
					this.beforedata.forEach(el => {
						//从session保存的选中数据中分离出属于当前表格的数据
						if (el.volunteerGroup == this.tableIndex + 1) {
							this.finalChosenData.push(el)
						}
					})
					this.$nextTick(() => {
						this.finalChosenData.forEach(item => {
							this.showData.forEach(row => {
								if (item.collegeName + item.professionalGroupCode  === row
									.collegeName + row.professionalGroupCode ) {
									this.$refs.select.toggleRowSelection(row, true);
								}
							})
						})
					})
				} else {
					// alert(2)
					this.beforedata = this.serverselect
					this.selectdata = this.beforedata
					//  console.log(this.showData)
					// console.log(this.beforedata)
					this.beforedata.forEach(el => {
						//从session保存的选中数据中分离出属于当前表格的数据
						if (el.volunteerGroup == this.tableIndex + 1) {
							this.finalChosenData.push(el)
						}
					})
					//  alert(1)
					this.$nextTick(() => {
						this.finalChosenData.forEach(item => {
							this.showData.forEach(row => {
								if (item.collegeName + item.professionalGroupCode  === row
									.collegeName + row.professionalGroupCode) {
									this.$refs.select.toggleRowSelection(row, true);
								}
							})
						})
					})
				}

			},
			platform() {
				setTimeout(() => {
					this.getchose()
				}, 500);
			},
		},
		watch: {
			showData: {
				deep: true, //深度监听
				handler: function(val, old) {
					this.$emit('newData', this.showData);
					// console.log(this.showData);
				}

			}
		},
		mounted() {
			// this.majordata = this.majorData[0]
			// console.log(this.majordata)
			if (this.tableData[0].collegeName == null) {
				this.showData = []
			} else {
				this.showData = this.tableData
			}
			// console.log(this.showData)
			this.showFlag = true
			let form = JSON.parse(sessionStorage.form)
			// console.log(form.batch)
			if (form.batch == 2) {
				this.newExam = true
			}
			// console.log(this.showData);
			// if (this.showData.length > 6) {
			// 	for (let i = 0; i < this.showData.length - 6; i++) {
			// 		this.color.push(this.color[i])
			// 		// console.log("1");
			// 	}
			// }
			// console.log(this.tableData);
			//阻止默认行为
			document.body.ondrop = function(event) {
				event.preventDefault(),
					event.stopPropagation()
			}
			//有缓存用缓存
			if (!sessionStorage.getItem('limittable')) {
				this.platform()
			} else if (sessionStorage.getItem('limittable') && this.status == 1) {
				this.choosen()
			} else if (!sessionStorage.getItem('preferredtable') && this.status == 2) {
				this.platform()
			} else if (sessionStorage.getItem('preferredtable') && this.status == 2) {
				this.choosen()
			}

			this.rowDrop()
		}
	}
</script>
<style scoped>
	.table {
		width: 100%;
	}

	.explain {
		font-size: 10px;
		font-family: Source Han Sans;
		font-weight: 400;
		line-height: 41px;
		color: red;
		width: 100%;
		/* height: 41px; */
		margin-left: 60px;
		margin-top: 24px;
		text-align: left;

	}

	p {
		font-size: 30px;
		font-family: Noto Sans SC;
		color: #000000;
	}

	span {
		font-size: 23px;
		font-family: Noto Sans SC;
	}

	.el-table>>>.rowstyle {
		height: 0.3325rem;
		text-align: center;
		font-size: 16px;
		font-family: Source Han Sans;
		font-weight: 100;
		line-height: 27px;
		color: #3A3A3A;
		/* padding-left:8px !important; */
		/* var()函数使用css变量     */
		border-bottom: #33AAFF 1px solid !important;
		border-left: none;
		border-right: none;
	}

	.expand {
		width: 100%;
		min-height: 50px;
	}

	.el-table>>>.rowstyle2 {
		background-color: #33AAFF;
	}

	.subject {
		display: inline-block;
		width: 800px;
		height: 50px;
		margin-left: 60px;
		/* margin-bottom: 10px; */
	}

	.subject .label {
		height: 25px;
		font-size: 16px;
		font-family: Source Han Sans;
		color: #333333;
		text-align: left;
	}

	.subject .input {
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

	.subject .right {
		width: 300px;
		float: right;
		height: 100%;
	}

	.subject .left {
		width: 125px;
		float: left;
		height: 100%;
	}

	.subject.block {
		margin-left: 10px;
	}

	#select>>>.el-input__inner {
		border: 1px solid rgba(51, 170, 255, 1);
	}

	.el-table>>>.chosenClass {
		/* opacity: 0.8; */
		background: url(../assets/icon.png) #fff no-repeat 12px 13px !important;
		opacity: 1;
		/* transform:translateY(-10px); */
		/* transition-duration: 0.5s; */
	}

	.el-table>>>.dragged-item {
		display: none;
	}

	.el-table>>>.display {
		display: none;
	}

	.indexNum {
		width: 5px;

	}

	.el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.el-cascader-panel {
		height: 280px;
	}

	.el-scrollbar__bar.is-vertical {
		width: 10px
	}


	/* 去掉全选按钮 */
	/* ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
		display: none !important;
	}

	::v-deep .el-table .disabledCheck .cell::before {
		content: '';
		text-align: center;
		line-height: 37px;
	} */
</style>
<style>
	.el-scrollbar__thumb {
		background-color: red
	}

	.el-scrollbar__thumb:hover {
		background-color: red
	}

	.el-checkbox__inner {
		width: 30px;
		height: 30px;
		border: 3px solid #DCDFE6 !important;
	}

	.el-checkbox__inner::after {
		height: 13px !important;
		left: 10px !important;
	}
</style>
